---
{
	"title": "Details closed",
	"language": "en",
	"category": "Plugins",
	"categoryfile": "plugins",
	"description": "Keep selected details elements closed on defined viewport and under.",
	"altLangPrefix": "details-close",
	"dateModified": "2025-08-27"
}
---

<h2>Purpose</h2>
<p>Keep selected <code>details</code> elements closed on defined viewport and down. If no viewport is defined, the default is small viewport.</p>

<h2>Working example</h2>
<ul>
	<li><a href="../../../demos/details-close/details-close-en.html">Default example</a></li>
</ul>

<h2>Evaluation and report</h2>
<p>There is no evaluation and report available for this component.</p>

<h2>How to implement</h2>
<ol>
	<li>Add the CSS class <code>wb-details-close</code> to any <code>&lt;details></code> element you want closed on a defined breakpoint and smaller breakpoints.</li>
	<li>Optionally, add the attribute <code>data-breakpoint</code> with any of the following value and the <code>&lt;details></code> element will remain closed on that breakpoint and smaller breakpoints (default is "sm"):
		<ul>
			<li>xxs</li>
			<li>xs</li>
			<li>sm</li>
			<li>md</li>
			<li>lg</li>
		</ul>
	</li>
</ol>

<h3>Configuration</h3>
<table class="table">
	<tr>
		<th>Property name</th>
		<th>Type</th>
		<th>Description</th>
		<th>Values</th>
	</tr>
	<tr>
		<td><code>[data-breakpoint]</code></td>
		<td><code>String</code></td>
		<td>Defines highest viewport from which the <code>&lt;details></code> element is closed.</td>
		<td>xxs, xs, sm, md, lg</td>
	</tr>
</table>

<h3>Function</h3>
<table class="table">
	<tr>
		<th>Function type</th>
		<th>Name</th>
		<th>How to implement</th>
		<th>What it does</th>
	</tr>
	<tr>
		<td>jQuery Event</td>
		<td><code>wb-init.wb-details-close</code></td>
		<td>Triggered manually (e.g., <code>$( ".wb-details-close" ).trigger( "wb-init.wb-details-close" );</code>).</td>
		<td>Initializes the details-close plugin. This plugin will be initialized automatically unless the <code>.wb-details-close</code> element is added after the page load and wet-boew was initialized.</td>
	</tr>
	<tr>
		<td>jQuery Event</td>
		<td><code>wb-ready.wb-details-close</code></td>
		<td>Triggered automatically after the plugin initializes.</td>
		<td>Used to identify when and where the plugin initializes (target of the event).
			<pre><code>$( document ).on( "wb-ready.wb-details-close", ".wb-details-close", function( event ) {
});</code></pre>
			<pre><code>$elm.on( "wb-ready.wb-details-close", function( event ) {
});</code></pre>
		</td>
	</tr>
</table>

<h2>Source code</h2>
<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/details-close">Details closed on mobile source code on GitHub</a></p>
